<template>
  <Page class="demo-iscroll demo-page">
    <!-- 垂直可滚动区域 -->
    <section class="section">
      <header class="header">垂直可滚动区域</header>
      <div class="iscroll iscroll-1" ref="iscroll1">
        <div class="iscroll-content">
          <p v-for="number of 60" :key="number">{{ number }}</p>
        </div>
      </div>
    </section>

    <!-- 水平可滚动区域 -->
    <section class="section">
      <header class="header">水平可滚动区域</header>
      <div class="iscroll iscroll-2" ref="iscroll2">
        <div class="iscroll-content">
          <p v-for="number of 30" :key="number">{{ number }}</p>
        </div>
      </div>
    </section>

    <!-- 使用iscroll解决滚动穿透问题 -->
    <section class="section">
      <header class="header">使用iscroll解决滚动穿透问题</header>
      <button class="theme-btn" @click="showModal = true">
        打开可滚动的fixed层
      </button>
    </section>

    <!-- 可滚动的fixed层 -->
    <Modal
      :show="showModal"
      clickModalToClose
      @close="showModal = false"
      backgroundColor="rgba(0, 0, 0, 0.6)"
    >
      <section class="iscroll iscroll-3" ref="iscroll3">
        <div class="iscroll-content">
          <p v-for="number of 20" :key="number">{{ number }}</p>
        </div>
      </section>
    </Modal>
  </Page>
</template>

<script>
import Iscroll from "iscroll/build/iscroll-probe";
import Modal from "@/components/common/ui/Modal";
export default {
  name: "demoIscroll",
  components: {
    Modal
  },
  data() {
    return {
      iscroll1Obj: null,
      iscroll2Obj: null,
      iscroll3Obj: null,

      showModal: false
    };
  },
  computed: {},
  watch: {
    showModal() {
      // dom的display发生变化，需要刷新一下iscroll
      this.$nextTick(() => {
        this.iscroll3Obj.refresh();
      });
    }
  },
  created() {},
  mounted() {
    // 初始化Iscroll
    this.initIscroll();
  },
  methods: {
    // 初始化Iscroll
    initIscroll() {
      const iscroll1 = this.$refs.iscroll1;
      const iscroll2 = this.$refs.iscroll2;
      const iscroll3 = this.$refs.iscroll3;

      // 禁止元素原有的touchmove与mousewheel事件，交给Iscroll处理
      iscroll1.addEventListener("touchmove", e => {
        e.preventDefault();
      });
      iscroll1.addEventListener("mousewheel", e => {
        e.preventDefault();
      });
      iscroll2.addEventListener("touchmove", e => {
        e.preventDefault();
      });
      iscroll2.addEventListener("mousewheel", e => {
        e.preventDefault();
      });
      iscroll3.addEventListener("touchmove", e => {
        e.preventDefault();
      });
      iscroll3.addEventListener("mousewheel", e => {
        e.preventDefault();
      });

      // 初始化iscroll对象
      this.iscroll1Obj = new Iscroll(iscroll1, {
        scrollX: false,
        scrollY: true,
        probeType: 3 // 像素级触发事件
      });
      this.iscroll2Obj = new Iscroll(iscroll2, {
        scrollX: true,
        scrollY: false,
        probeType: 3 // 像素级触发事件
      });
      this.iscroll3Obj = new Iscroll(iscroll3, {
        scrollX: false,
        scrollY: true,
        probeType: 3 // 像素级触发事件
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
.section {
  &:not(:last-of-type) {
    margin-bottom: 40px;
  }
  .header {
    color: $color-theme;
    font-size: 14px;
    margin-bottom: 15px;
  }
}

.iscroll {
  overflow: auto;
  width: 200px;
  margin: 0 auto;
  border: 1px solid $color-theme;
  border-radius: 5px;
  &.iscroll-1 {
    height: 600px;
  }
  &.iscroll-2 {
    .iscroll-content {
      @include display-flex;
      width: 1000px;
      p {
        flex: 1;
      }
    }
  }
  &.iscroll-3 {
    background-color: white;
    border: none;
    width: 300px;
    height: 150px;
  }
  .iscroll-content {
    padding: 10px;
    p {
      color: #4b4b4b;
      text-align: center;
    }
  }
}
</style>
